<template>
  <div id="search-box">
    <title-bar>
      <h1 slot="left" @click="goHome">
        💨
      </h1>
      <h2 slot="center">搜索</h2>
    </title-bar>
    <search-bar @historyChange='getData'></search-bar>
    <ul>
      <li v-for="(item,index) in historyList" :key="index">
        {{item}}
      </li>
    </ul>
  </div>
</template>

<script>
import TitleBar from '../components/common/title_bar/TitleBar.vue'
import SearchBar from '../components/SearchChild/SearchBar.vue'

export default {
  components: { 
    TitleBar,
    SearchBar
  },
  name:"SearchBox",
  data(){
    return{
      historyList:[]
    }
  },
  methods:{
    goHome(){
      this.$emit('gohome')
    },
    getData(v){
      this.historyList.push(v)
      this.historyList = [...new Set(this.historyList)]
    }
  },
  created(){
    var arr = localStorage.getItem("historyData")
    if(arr == null){
      localStorage.setItem("historyData",JSON.stringify([]))
    }else{
      this.historyList = JSON.parse(arr)
    }
  }
}
</script>

<style scoped>

</style>